<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
	href="extjs-4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs-4/bootstrap.js"></script>
<script type="text/javascript" src="extjs-4/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.require([
             'Ext.grid.*',
             'Ext.data.*',
             'Ext.util.*',
             'Ext.grid.plugin.BufferedRenderer'
         ]);


         Ext.onReady(function(){
             Ext.define('ForumThread', {
                 extend: 'Ext.data.Model',
                 fields: [
                          'username', {
                           name: 'replycount',
                           type: 'int'
                          }
                      ],
                 idProperty: 'threadid'
             });

             // create the Data Store
             var store = Ext.create('Ext.data.Store', {
                 id: 'store',
                 model: 'ForumThread',
                 remoteGroup: true,
                 // allow the grid to interact with the paging scroller by buffering
                 buffered: true,
                 leadingBufferZone: 300,
                 pageSize: 100,
                 proxy: {
                     // load using script tags for cross domain, if the data in on the same domain as
                     // this page, an Ajax proxy would be better
                     type: 'ajax',
                     url: 'Test',
                     reader: {
                         root: 'topics',
                         totalProperty: 'totalCount'
                     },
                     // sends single sort as multi parameter
                     simpleSortMode: true,
                     // sends single group as multi parameter
                     simpleGroupMode: true,

                     // This particular service cannot sort on more than one field, so grouping === sorting.
                     groupParam: 'sort',
                     groupDirectionParam: 'dir'
                 },
                 sorters: [{
                     property: 'threadid',
                     direction: 'ASC'
                 }],
                 autoLoad: true,
                 listeners: {

                     // This particular service cannot sort on more than one field, so if grouped, disable sorting
                     groupchange: function(store, groupers) {
                         var sortable = !store.isGrouped(),
                             headers = grid.headerCt.getVisibleGridColumns(),
                             i, len = headers.length;
                         
                         for (i = 0; i < len; i++) {
                             headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
                         }
                     },

                     // This particular service cannot sort on more than one field, so if grouped, disable sorting
                     beforeprefetch: function(store, operation) {
                         if (operation.groupers && operation.groupers.length) {
                             delete operation.sorters;
                         }
                     }
                 }
             });

             function renderTopic(value, p, record) {
                 return Ext.String.format(
                     '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
                     value,
                     record.data.forumtitle,
                     record.getId(),
                     record.data.forumid
                 );
             }

             var grid = Ext.create('Ext.grid.Panel', {
                 width: 700,
                 height: 500,
                 collapsible: true,
                 title: 'ExtJS.com - Browse Forums',
                 store: store,
                 loadMask: true,
                 selModel: {
                     pruneRemoved: false
                 },
                 multiSelect: true,
                 viewConfig: {
                     trackOver: false
                 },
                 features:[{
                     ftype: 'grouping',
                     hideGroupedHeader: false
                 }],
                 // grid columns
                 columns:[{
                     xtype: 'rownumberer',
                     width: 50,
                     sortable: false
                 },{
                     text: "Author",
                     dataIndex: 'username',
                     width: 100,
                     sortable: true
                 },{
                     text: "Replies",
                     dataIndex: 'replycount',
                     align: 'center',
                     width: 70,
                     sortable: false
                 }],
                 renderTo: 'test2'
             });
         });
</script>
</head>
<body>
	<div id="test2"></div>
</body>
</html>